$(function(){
    loadTeacherList();
});

function loadTeacherList(){
    $.ajax({
        url: "/api/teacher/list"
    }).done(function(data) {
        //console.log(data)
        let html="";
        data.forEach((element, index) => {
            html+="<tr>"
            html+="<td>"+element.id+"</td>"
            html+="<td>"+element.name+"</td>"
            html+="<td>"+(element.sex == 1 ? '男' : (element.sex == 2 ? '女' : '未知'))+"</td>"
            html+="<td>"+element.age+"</td>"
            html+="<td>"+element.tno+"</td>"
            html+="<td> <a href='#' onclick='showTeacherDlg("+element.id
                +")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById("+
                +element.id+")'>删除</a></td>"
            html+="</tr>"
        })
        $("#teacherTb").html(html)
    });
}

let layerIndex;
/**
 * 弹出教师新增/更新对话框
 */
function showTeacherDlg(id){
    let title="新增教师"
    if(id){
        //是编辑
        title="编辑教师"
        $("#formId").css("display","block");

        //读取教师信息,并赋值
        $.ajax({
            url:"/api/teacher/"+id,
            method:"GET"
        }).done(result=>{
            console.log(result)
            //遍历 result 对象并将值填充到 #teacherForm 表单中
            $.each(result,function (key,value){
                //修改选择器，确保选择的是 #teacherForm 内的字段
                var field = $('#teacherForm [name="' + key + '"]');
                if(field.is(':radio')){
                    field.filter('[value="' + value + '"]').prop('checked',true);//选中对应的单选按钮
                } else if(field.is(':checkbox')){
                    field.prop('checked',value==="yes");//选中复选框
                } else {
                    field.val(value);//填充文本框或其它字段
                }
            });
        })
    }else{
        //是新增
        $("#teacherForm")[0].reset();
        $("#formId").css("display","none");
    }
    layerIndex = layer.open({
        type: 1,
        title: title,
        area: ['520px','auto'],
        content: $('#teacherForm') //捕获层
    });
}

layui.use(function(){
    //（1）验证表单是否合法
    layui.form.on("submit(teacher-dlg)",function (data){
        event.preventDefault();//阻止表单默认提交
        commitTeacherDlg();
    })
});

function commitTeacherDlg(){
    let id=$("#id").val()
    let formData = $("#teacherForm").serialize();
    if(id!=null && id!=""){
        //是更新学生
        $.ajax({
            url:"/api/teacher/update",
            method:"PUT",
            data:formData
        }).done(result=>{
            console.log(result);
            if(result.id){
                //（4）读取并刷新原来的读学生列表
                loadTeacherList();

                //（3）关闭弹出框
                console.log("add success!")
                if(layerIndex)
                    layer.close(layerIndex)
            }
        }).fail((jqXHR, textStatus, errorThrown)=>{
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            //可以在这里处理错误逻辑
            alert("An error occurred. Please try again.");
        });
    } else {
        //新增学生需要进行
        //（2）将表单数据发送到服务器的insert中，把提交按钮变灰
        $.ajax({
            url:"/api/teacher/add",
            method:"POST",
            data:formData
        }).done(result=>{
            console.log(result);
            if(result.id){
                //（4）读取并刷新原来的读学生列表
                loadTeacherList();

                //（3）关闭弹出框
                console.log("add success!")
                if(layerIndex)
                    layer.close(layerIndex)
            }
        }).fail((jqXHR, textStatus, errorThrown)=>{
            console.error("Request failed: " + textStatus + " - " + errorThrown);
            //可以在这里处理错误逻辑
            alert("An error occurred. Please try again.");
        });
    }

    $("#btnOK").prop("disabled",true).addClass("layui-btn-disabled");//禁用按钮
}

function deleteById(id){
    //删除
    layer.confirm('你真的要删除吗？一旦删除，不可恢复！', {icon: 3}, function(){
        $.ajax({
            url:"/api/teacher/delete/"+id,
            method:"DELETE"
        }).done(result=>{
            loadTeacherList();
        })
        layer.closeAll();//关闭所有层（包括确认框）
    }, function(){
    });
}

const btn=document.querySelector('.btn')
btn.addEventListener("click",()=> {
    let name = document.querySelector('.tName').value
    axios({
        url: "/api/teacher/search",
        params: {
            name
        }
    }).then((element) => {
        let html = "";
        console.log(element.data[0])
        html = `
                <tr>
                <td>${element.data[0].id}</td>
                <td>${element.data[0].name}</td>
                <td>${element.data[0].sex == 1 ? '男' : (element.data[0].sex == 2 ? '女' : '未知')}</td>
                <td>${element.data[0].age}</td>
                <td>${element.data[0].tno}</td>
                </tr>
                `
        document.querySelector('#teacher').innerHTML = html
    })
})
